import React, { PropTypes } from 'react';
import $ from 'jquery';
import store from 'store';

import { Router, Route, browserHistory, IndexRoute, Link } from 'react-router';
import {getLastTimeStr, getTabClassName ,getTabStr } from '../libs/utils';
import Header from '../components/header.jsx';
// import Link from '../components/link.jsx';


// import data from '../data/index.json';
const ACTIVE = {color:'#2c3e50'};

const propTypes = {
  id: PropTypes.number.isRequired,
  text: PropTypes.string,
};

const defaultProps = {
    id:0,
};

class List extends React.Component {
  constructor(props) {
    super(props);
    this.canLoad = true;
    this.state = {
        data:[],
        canLoad:true,
        page:1,
        tab:this.props.params.tab || 'all',
    }
    // console.log(props)
    // return false;
  }
  static methodsAreOk() {
    return true;
  }
  componentWillMount() {
    console.log('componentWillMount');
    return false;
  }
  componentDidMount() {
    console.log('componentDidMount--List');
    // store.set('ssssl','101010101010101');

    if (this.canLoad) {

        this.getData();

    } else {
        //防假死   超时清锁
        setTimeout(()=>{
            this.canLoad=true;
        },3000);
    }
    window.addEventListener('scroll', this.handleScroll.bind(this));
    return false;
  }
  getData() {
    if(this.canLoad) {
        $.ajax({
            url:'https://cnodejs.org/api/v1/topics',
            data:{
                page:this.state.page,
                limit:20,
                tab: this.state.tab,
                mdrender:true,
            },
            dataType:'json',
        }).success((data) => {
            console.log(data);
            if (data.data.constructor.toString().indexOf(' Array()')===8) {
                //isArray()
                this.canLoad=true;
                this.setState({
                    data:this.state.data.concat(data.data),
                    page:this.state.page+1,
                });
            }
        }).error((error)=> {
            console.log(error);
        });
    }
    this.canLoad=false;
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.params.tab !== this.state.tab){
      this.state.tab=nextProps.params.tab;
      this.state.data=[]
      this.state.page=1
      this.getData()
      // console.log(this.state.data)
    }
    console.log('componentWillReceiveProps-----list');
    return false;
  }
  shouldComponentUpdate() {
    return true;
  }
  componentWillUpdate() {
    console.log('componentWillUpdate');
    return false;
  }
  componentDidUpdate() {
    console.log('componentDidUpdate');
    // this.getData()
    // return false;
  }
  componentWillUnmount() {
    console.log('componentWillUnmount');
    window.removeEventListener('scroll', this.handleScroll.bind(this));
    // return false;
  }
  clickHandlers() {
    console.log('clicked');alert('onTouchStart');
    // return false;
  }
  handleWheel (event, id) {
      // console.log(event);
      // console.log(window.scrollY);
      var e=event;
      // console.log(e.clientY);
      // console.log(e.deltaY);
      // console.log(e.pageY);
      // console.log(e.screenY);
  }
  handleScroll(event, id) {
    // alert('')
    !!event && (console.log(event) && alert(''))
      if (window.innerHeight+document.body.scrollTop>document.body.scrollHeight-200) {
        console.log('emit!')
        this.getData();
      }
  }
  render() {
    console.log(this.state)
    return (
      <div className="comp-list">
      <Header history={this.props.history}></Header>
        <section id="page" onWheel={this.handleWheel.bind(this)} onScroll={this.handleScroll.bind(this)} onScrollCapture={this.handleScroll.bind(this)} >
            <ul className="posts-list">
            {this.state.data && this.state.data.map(function (item, i) {
                return (
                    <li key={item.id}>
                    <h3 className={getTabClassName(item.tab,item.good,item.top)} title={getTabStr(item.tab, item.good,item.top)}>
                        <Link to={"/topic/"+item.id} className="no-link-style" activeStyle={ACTIVE}>{item.title}</Link>
                    </h3>
                    <div className="content">
                        <img src="./images/14342431.jpg" data-src={item.author.avatar_url} alt="" className="avatar" onTouchStart={this.clickHandlers.bind(this)}/>
                        <div className="info">
                            <p>
                                <span className="name">
                                    {item.author.loginname}
                                </span>
                                <span className="status">

                                    <b>{item.reply_count}</b>
                                    /{item.visit_count}
                                </span>
                            </p>
                            <p>
                                <time>{getLastTimeStr(item.create_at,true)}</time>
                                <time>{getLastTimeStr(item.last_reply_at,true)}</time>
                            </p>
                        </div>
                    </div>
                    </li>)
            },this)}

            </ul>
        </section>
      </div>
    );
  }
}

List.propTypes = propTypes;
List.defaultProps = defaultProps;

export default List;